import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  fontSize: {
    fontSize: (props: { fontSize: number }) => props.fontSize,
  },
  input: {
    color: "#333",
    width: "232px",
    border: "1px solid #d9d9d9",
    height: "24px",
    display: "flex",
    alignItems: "center",
    flexWrap: "nowrap",
    overflow: "hidden",
    borderRadius: "4px",
    padding: "0 4px 0 10px",
    boxSizing: "border-box",
    fontSize: (props: { fontSize: number }) => props.fontSize,
  },
  inputDisabled: {
    color: "#c5c5c5",
    cursor: "no-drop",
  },
  inputContent: {
    flex: "1",
    overflow: "hidden",
  },
  inputItem: {
    width: "100%",
    display: "flex",
    alignItems: "center",
    flexWrap: "nowrap",
    height: "100%",
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
    cursor: "pointer",
  },
  placeholder: {
    color: "#c5c5c5",
  },
  iconCaret: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    width: "15px",
    cursor: "pointer",
    color: "#666",
    transform: "scale(0.9)",
  },
  iconCaretDisabled: {
    color: "#999",
    cursor: "no-drop",
  },
});

export { useStyles };
